<template>
    <!--  外框架-->
    <div class="framework1">
        <!--      内框架-->

        <div class="framework2" v-show="!clickTemplate">
            <!--        卷宗管理表格-->
            <div class="top-class-table">
                <div class="header">
                    <span>统计管理-></span>
                    <span>文书统计</span>
                </div>
                <!--          新增刷新-->
                <div class="button_group">

                </div>
                <!--           数据表-->
                <div style="height: calc(100vh - 134px)">
                    <el-table :data="tableData" :row-style="{ height: '47px' }"
                        style="width: 100%;height:calc(100% - 68px)" :header-cell-style="{ background: '#f4f3f9' }">

                    </el-table>
                    <!--    分页-->
                    <div class="footer">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :page-sizes="[5, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import request from "@/utils/request";

export default {
    name: "Dossier",
    data() {
        return {
            //表格数据
            tableData: [],

            //表格分页
            currentPage: 1, //页码
            pageSize: 10, //页长
            total: 0,  //总表长

            // 登录用户信息
            loginUserInfo: {
                id: '',
                responsibleScope: '', //查询范围
                roleLevel: '', //角色等级
                unitId: '', //内设部门ID
                userRole: '', //角色ID
                permissions: [], // 按钮路径（数据库中的path）
            },
            // 按钮权限
            permissionIsShow: {
            }
        };
    },//data

    created() {
        const info = JSON.parse(localStorage.getItem("user"));
        this.loginUserInfo = {
            id: Number(info.id),
            responsibleScope: info.responsibleScope, // 查询范围
            roleLevel: Number(info.roleLevel),
            unitId: Number(info.unitId),
            userRole: Number(info.userRole),
            permissions: info.permissions.filter(item => Number(item.menuId) === 40).map(item => item.path),
        }
        this.permissionIsShow = {

        }
        this.load();

    },

    methods: {
        load() {

        },

        //表尾分页
        handleSizeChange(val) {
            this.pageSize = val;
            this.load();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.load();
        },

    }//methods
}//default


</script>


<style scoped>
#roleSpan {
    color: black;
    text-decoration: none;
}


/*   外框架   */
.framework1 {
    height: calc(100vh - 88px);
    width: calc(100vh - 200px);
    margin-left: 8px;
    border: solid 1px #D3D3D3;
}

/*   文书内框架   */
.frameworkIn1 {
    height: calc(100vh - 92px);
    width: 100%;
    border: solid 1px #D3D3D3;
}

/*   内框架   */
.framework2 {
    height: calc(100vh - 92px);
    border: solid 1px #D3D3D3;
}

/*   文书标题   */
.templateHeader {
    font-size: 19px;
    font-weight: bold;
    padding: 4px 20px;
    height: 30px;
    border: 1px solid #CCCCCC;
    background-color: #E0ECFF;
}

/*   文书底边   */
.templateFooter {
    text-align: center;
    margin-top: -4px;
    padding: 4px 20px;
    height: 30px;
    border: 1px solid #CCCCCC;
    background-color: #E0ECFF;
}

/*   表格大标题   */
.header {
    font-size: 16px;
    font-weight: bold;
    padding: 4px 20px;
    height: 22px;
    background-color: #CCCCCC;
}

/*   表格按键组   */
.button_group {
    padding: 4px 10px;
    background-color: #DDDDDD;
}

/*   表格分页处   */
.footer {
    padding: 4px 10px;
    background-color: #f4f3f9;
}
</style>
